<template>
  <div class="vue-office-test">
    <div class="test-header">
      <h2>Vue-Office 组件测试</h2>
      <el-button @click="goBack">返回</el-button>
    </div>

    <div class="test-content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="DOCX预览测试" name="docx">
          <div class="test-section">
            <h3>Word文档预览测试</h3>
            <div class="file-input">
              <el-input 
                v-model="docxUrl" 
                placeholder="输入DOCX文件URL"
                style="width: 400px; margin-right: 10px;"
              />
              <el-button type="primary" @click="loadDocx">加载预览</el-button>
            </div>
            
            <div v-if="docxUrl" class="preview-container">
              <VueOfficeDocx
                :src="docxUrl"
                :options="docxOptions"
                @rendered="onDocxRendered"
                @error="onDocxError"
                style="height: 600px; border: 1px solid #ddd;"
              />
            </div>
            
            <div v-if="docxError" class="error-message">
              <el-alert type="error" :title="docxError" show-icon />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="PDF预览测试" name="pdf">
          <div class="test-section">
            <h3>PDF文档预览测试</h3>
            <div class="file-input">
              <el-input 
                v-model="pdfUrl" 
                placeholder="输入PDF文件URL"
                style="width: 400px; margin-right: 10px;"
              />
              <el-button type="primary" @click="loadPdf">加载预览</el-button>
            </div>
            
            <div v-if="pdfUrl" class="preview-container">
              <VueOfficePdf
                :src="pdfUrl"
                :options="pdfOptions"
                @rendered="onPdfRendered"
                @error="onPdfError"
                style="height: 600px; border: 1px solid #ddd;"
              />
            </div>
            
            <div v-if="pdfError" class="error-message">
              <el-alert type="error" :title="pdfError" show-icon />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeTab = ref('docx')

// DOCX相关
const docxUrl = ref('')
const docxError = ref('')
const docxOptions = ref({
  debug: false,
  experimental: false,
  className: 'docx-wrapper',
  inWrapper: true,
  ignoreWidth: false,
  ignoreHeight: false,
  ignoreFonts: false,
  breakPages: true,
  ignoreLastRenderedPageBreak: true,
  trimXmlDeclaration: true,
  useBase64URL: false,
  useMathMLPolyfill: false,
  showChanges: false
})

// PDF相关
const pdfUrl = ref('')
const pdfError = ref('')
const pdfOptions = ref({
  scale: 1,
  page: 1
})

// 事件处理
const onDocxRendered = () => {
  console.log('DOCX渲染完成')
  ElMessage.success('Word文档加载成功')
  docxError.value = ''
}

const onDocxError = (error: any) => {
  console.error('DOCX加载错误:', error)
  docxError.value = '无法加载Word文档: ' + (error.message || '未知错误')
  ElMessage.error('Word文档加载失败')
}

const onPdfRendered = () => {
  console.log('PDF渲染完成')
  ElMessage.success('PDF文档加载成功')
  pdfError.value = ''
}

const onPdfError = (error: any) => {
  console.error('PDF加载错误:', error)
  pdfError.value = '无法加载PDF文档: ' + (error.message || '未知错误')
  ElMessage.error('PDF文档加载失败')
}

const loadDocx = () => {
  if (!docxUrl.value) {
    ElMessage.warning('请输入DOCX文件URL')
    return
  }
  docxError.value = ''
  ElMessage.info('开始加载Word文档...')
}

const loadPdf = () => {
  if (!pdfUrl.value) {
    ElMessage.warning('请输入PDF文件URL')
    return
  }
  pdfError.value = ''
  ElMessage.info('开始加载PDF文档...')
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.vue-office-test {
  padding: 20px;
}

.test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.test-content {
  margin-top: 20px;
}

.test-section {
  padding: 20px 0;
}

.file-input {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.preview-container {
  margin-top: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.error-message {
  margin-top: 20px;
}
</style>
